<template>
  <view class="page-bg-scroll">
	  
    <scroll-view
      scroll-y
      class="scroll-content"
      refresher-enabled
      :refresher-background="refresherBg"
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="onRefresh"
      :refresher-threshold="refresherThreshold"
      :refresher-default-style="refresherDefaultStyle"
      :refresher-default-text="refresherDefaultText"
      :refresher-pulling-text="refresherPullingText"
      :refresher-refreshing-text="refresherRefreshingText"
      style="height: 100vh;"
    >
      <view class="background" :style="{ background: currentWallpaperStyle() }" >
<!--    <status-bar backgroundColor="#e5e5e569"/>-->
        <view class="header" id="menu">
          <view class="lab-menu" @click="clickIndex_lab">
            <text class="lab-name">{{ labName }}</text>
            <image class="icon-lab" src="../../static/images/4a1830d2fd5f9bdb369b3d10854df060.png"/>
          </view>
          <view class="top-right">
            <uni-badge class="notification-badge" :text="unreadnum" absolute="rightTop"
                       :offset="[-3, -3]" size="small">
              <view class="add-room-icon" @click="clickIndex_room()" id="menu2" style="margin-right: 40rpx">
                <view class="plus"></view>
              </view>
              <image class="icon-notification" @click="navTo('/pages/inform1/inform1')"
                     src="../../static/images/67f4e58eb554ee634e3a904ace59c69c.png"/>
            </uni-badge>
          </view>
        </view>
        <view class="group">
          <view class="group-container">
            <view class="room-selector">
              <view class="room-lists">
                <scroll-view class="scroll-view" scroll-x="true" @scroll="scroll()" scroll-left="120">
                  <view class="scroll-item" :class="{ 'active': selectedRoomIndex === -1 }" @click="doGetAllEqualsInfo()"
                        style="height: 60rpx">全部
                  </view>
                  <view v-for="(item, index) in rooms" class="scroll-item"
                        :class="{ 'active': selectedRoomIndex === index }" style="height: 60rpx"
                        @click="getroomequip(index)">
                    {{ item.name_room }}
                  </view>
                </scroll-view>
              </view>

            </view>
            <view v-if="equips.length !== 0">
              <o-grid col="2" gutter="true" square="false" border="false" radius="true">
                <o-grid-item v-for="(item, index) in equips" :index="index" :key="index" @tap="link(index)"
                             @longpress="toEdit">
                  <view class="equipment-item">
                    <view class="wrap">
                      <view class="top">
                        <image class="pic" src="@/static/images/51276e00a4890f11936fcc00b81e6367.png"/>
                        <uni-icons color="#77c7e5" type="checkbox-filled"
                                   v-if="selectedIndexs.indexOf(index) !== -1 && editMode"/>
                        <uni-icons color="gray" type="checkbox-filled" v-else-if="editMode"/>
                      </view>
                      <view class="info">
                        <text class="name_equip">{{ item.name_equip }}</text>
                        <view class="desc-row">
                          <text class="detail room-name">{{ item.name_room }}</text>
                          <text class="detail status" :style="{
                            color:
                              item.workingtag_equip === '未连接'
                                ? '#a6a6a6'
                                : item.workingtag_equip === '已连接'
                                ? '#03ac79'
                                : item.workingtag_equip === '运行中'
                                ? '#03ac79'
                                : item.workingtag_equip === '待机'
                                ? '#03ac79'
                                : item.workingtag_equip === '设备离线'
                                ? '#ff0000'
                                : item.workingtag_equip === '任务结束'
                                ? '#ff0000'
                                : item.workingtag_equip === '运行暂停'
                                ? '#ff0000'
                                : '',
                          }">{{ item.workingtag_equip }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </o-grid-item>
                <!-- 添加设备按钮作为一个设备卡片 -->
                <o-grid-item :index="equips.length" :key="'add-device'" @tap="navTo('/pages/addequips/addequips')">
                  <view class="add-device-card add-device-in-grid">
                    <view class="add-device-plus">+</view>
                    <view class="add-device-text">添加设备</view>
                  </view>
                </o-grid-item>
              </o-grid>
              <view class="edit-room-btn-wrap">
                <button class="edit-room-btn" @click="editCurrentRoom">编辑</button>
              </view>
            </view>

            <view v-else>
              <view class="add-device-card" @click="navTo('/pages/addequips/addequips')">
                <view class="add-device-plus">+</view>
                <view class="add-device-text">添加设备</view>
              </view>
            </view>
          </view>
          <!-- 编辑工具栏 -->
          <view class="edit-toolbar" v-show="editMode">
            <view class="tab-wrap">
              <view v-for="(item, index) in typeList" :key="index"
                    v-if="index === 0 || selectedIndexs.length < 2 && index > 0" class="tab-item"
                    :class="{ active: selectedIndexs.indexOf(index) !== -1 }" @click="clickTable(index)">
                <view :class="[tabCurrentIndex == index ? 'active' : '']">
                  <image :src="item.srcUrl" style="width: 50rpx; height: 50rpx;"/>
                </view>
                <text style="color: #696b66; font-size: 28rpx;">{{ item.name }}</text>
              </view>
              <view class="tab-item">
                <view :class="[tabCurrentIndex === -1 ? 'active' : '']" style="height: 58rpx">
                  <uni-icons type="checkmarkempty" style="font-size: 50rpx;" @click="clickTable(-1)"></uni-icons>
                </view>
                <text style="color: #696b66; font-size: 28rpx;">完成</text>
              </view>
            </view>
          </view>
          <!-- 删除设备 -->
          <next-modal
              :show="isDeleteequip"
              @confirm="deleteequip"
              @cancel="isDeleteequip=false"
              :title="`注意`"
              content="是否删除该设备"
              confirmColor="#000"
              :autoClose="false"
          >
          </next-modal>
          <!-- 重命名 -->
          <next-modal
              :show="showRenameDialog"
              @confirm="changename"
              @cancel="showRenameDialog = false; inputClearValue=''; showClearIcon=false"
              :title="`重命名`"
              confirmColor="#000"
              :autoClose="false"
          >
            <view slot="content">
              <view class="modal-content">
                <input class="input" placeholder="请输入修改后的设备名称" :value="inputClearValue" @input="clearInput"/>
                <uni-icons type="clear" style="font-size: 40rpx;" v-if="showClearIcon" @click="clearIcon"/>
              </view>
            </view>
          </next-modal>

          <chunLei-popups v-model="showIndex_lab" :popData="laboratoryList" @tapPopup="tapPopup" @input="input" :x="x"
                          :y="y-40" :triangle="false" dynamic maskBg="rgba(0,0,0,0.5)" paddingBottom="15rpx"/>
          <chunLei-popups v-model="showIndex_room" :popData="more" @tapPopup="handleOptionClick" @input="input" :x="x1"
                          :y="y1+10" :triangle="false" dynamic maskBg="rgba(0,0,0,0.5)" paddingBottom="15rpx"/>
          <uni-popup ref="popup" :is-mask-click="true" mask-background-color="rgba(0,0,0,0.5)">
            <myPopUp>
              <view class="reservate-wrap">
                <view class="title">
                  <text class="text">预约管理</text>
                  <uni-icons class="add-icon" type="plusempty" size="35rpx" @click="toReservate"></uni-icons>
                </view>
                <scroll-view scroll-y="true" class="scroll-Y">
                  <button v-for="(item,index) in reservateData" class="item" hover-class="is-hover"
                          @click="changeRes(item)">
                    <uni-datetime-picker v-model="item.range" type="datetimerange" rangeSeparator="至" :border="false"
                                         :clearIcon="false" disabled/>
                  </button>
                </scroll-view>
              </view>
            </myPopUp>
          </uni-popup>
          <!--   这个中心弹出框必须在下面，这样才能覆盖住上面的底部弹出框   -->
          <uni-popup ref="reservate" :is-mask-click="true" mask-background-color="rgba(0,0,0,0.5)">
            <view class="reservate-model">
              <view class="title">
                <text>预约设备</text>
              </view>
              <uni-datetime-picker v-model="datetimeRange" type="datetimerange" rangeSeparator="至"/>
              <view class="button" @click="reservateOrModify()">
                <text class="text_7">预 约</text>
              </view>
              <view class="tips">
                <text>考虑可能存在的冲突，请把预约时间设置的比实际实验时间长一点</text>
              </view>
            </view>
          </uni-popup>

          <uni-popup ref="change" :is-mask-click="true" mask-background-color="rgba(0,0,0,0.5)">
            <view class="change-wrap">
              <view class="title">
                <text>修改预约</text>
              </view>
              <view class="button-wrap">
                <view class="button" @click="unReservate">
                  <text class="text_7">删除</text>
                </view>
                <view class="button" @click="toModify">
                  <text class="text_7">修改</text>
                </view>
              </view>
            </view>
          </uni-popup>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex';

import Index_lab from '@/components/index_lab/index_lab.vue';
import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
import UniBadge from "@/uni_modules/uni-badge/components/uni-badge/uni-badge.vue";
//获取账号信息接口
import {
  _getuserinfo
} from '@/service/user.js'
//获取共享实验室房间列表接口
import {
  _getRoomsNew
} from '@/service/room.js'
//获取用户所有房间列表接口
import {
  _getrooms
} from '@/service/room.js'
//获取用户绑定设备列表接口
import {
  _getequiplist
} from '@/service/equip.js'
//获取用户绑定的设备列表(绑定加共享)
import {
  _getequiplistall
} from '@/service/equip.js'
//根据账号查询特定房间设备信息
import {
  _getroomequip
} from '@/service/equip.js'
//获取实验室信息
import {
  _labomanage
} from "@/service/user.js"
import {
  eventBus
} from '@/App.vue';

import {
  _unreadnum
} from '@/service/message.js'
import {
  _changename
} from '@/service/equip.js'
import {
  _deleteequip
} from '@/service/equip.js'
import axios from 'axios'
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
//根据该实验室拥有者的实验室id查询使用该实验室的使用者
import {
  _findUserById
} from '@/service/laborroom.js'
import UniGrid from "../../uni_modules/uni-grid/components/uni-grid/uni-grid.vue";
import UniGridItem from "../../uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue";
import {_cancelRes, _findEquipRes, _findResEquip, _modifyRes, _resEquip} from "@/service/exper_api";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import MyPopUp from "@/components/myPopUp/myPopUp.vue";
import UniDatetimePicker
  from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import NextModal from "@/uni_modules/next-modal/components/next-modal/next-modal.vue";
import StatusBar from "@/components/status-bar/status-bar.vue";

export default {
  components: {
    StatusBar,
    NextModal,
    UniDatetimePicker,
    MyPopUp,
    UniPopup,
    UniGridItem,
    UniGrid,
    UniIcons,
    UniBadge,
    Index_lab,
    chunLeiPopups
  },
  data() {
    return {
      roomWallpapers: {}, // 存储每个房间的壁纸
      resSelect: null,
      datetimeRange: [],//预约时间缓存
      reservateData: [],
      x: uni.upx2px(20) + 15,
      y: 0,
      x1: 0,
      y1: 0,
      //编辑模式
      editMode: false,
      selectedIndexs: [],
      tabCurrentIndex: '0',
      inputClearValue: '',
      isDeleteequip: false,
      showRenameDialog: false,
      showClearIcon: false,
      showIndex_room: false,
      showIndex_lab: false,
      //实验室名称
      labName: '空',
      account_user: '',
      password_user: '',
      rooms: [],
      equips: [],
      laboratoryList: [],//存放左上角弹窗菜单的数据"实验室列表"
      //选中的实验室下标
      selectedLaboratory: 0,
      //选中的实验室编号
      selectedLab: '',
      //选中的房间，-1是"全部"按钮
      selectedRoomIndex: -1,
      ownerID: 0,//房间拥有者id
      // roomlist:null//房间列表的索引值
      serialnum_room: '',
      headsculpture: '',
      unreadnum: '',
      more: [
        {
          title: '房间管理',
          icon: '../../static/images/d23369b06bf66e011b5745262a432e87.png',
          url: '/pages/roomsguanli/roomsguanli',
        },
        {
          title: '全部设备',
          icon: '../../static/images/a36da74dc7393daccbe80df1705e5cb0.png',
          url: '/pages/allequips/allequips'
        },
        {
          title: '添加设备',
          icon: '../../static/images/5049dde209f169ed654c5c0b68335933.png',
          url: '/pages/addequips/addequips'
        },
      ],
      //所有实验室数组
      laboManage: [],
      typeList: [{
        value: '1',
        srcUrl: '../../static/images/efff544c40d6ca31e3d98e9f42642b6d.png',
        selectSrcUrl: '../../static/images/efff544c40d6ca31e3d98e9f42642b6d.png',
        name: '删除',
        selected: false // 添加selected属性，默认为false
      },
        {
          value: '2',
          srcUrl: '../../static/images/7d9d29a6edb12017e2cdbf6da78f71fc.png',
          selectSrcUrl: '../../static/images/7d9d29a6edb12017e2cdbf6da78f71fc.png',
          name: '移动设备',
          selected: false // 添加selected属性，默认为false
        },
        {
          value: '3',
          srcUrl: '../../static/images/21b48f083461141fe0c21b7f8f5e8bd9.png',
          selectSrcUrl: '../../static/images/21b48f083461141fe0c21b7f8f5e8bd9.png',
          name: '重命名',
          selected: false // 添加selected属性，默认为false
        },
        {
          value: '4',
          srcUrl: '../../static/images/share (2).png',
          selectSrcUrl: '../../static/images/7fb848bc7cf281d60011673c809a0647.png',
          name: '共享',
          selected: false // 添加selected属性，默认为false
        },
        {
          value: '5',
          srcUrl: '../../static/images/yuyue.png',
          selectSrcUrl: '../../static/images/21b48f083461141fe0c21b7f8f5e8bd9.png',
          name: '预约',
          selected: false // 添加selected属性，默认为false
        }
      ],
      states: {
        'DISCONNECT': '设备离线',
        'CONNECTED': '待机',
        'RUN': '加热中',
        'ON': '开机',
        'OFF': '关机',
        'STOP': '冷却中',
        'PULSE': '保温中'
      },
      refresherTriggered: false,
      refresherBg: 'transparent',
      refresherThreshold: 100,
      refresherDefaultStyle: 'black',
      refresherDefaultText: '下拉刷新',
      refresherPullingText: '释放刷新',
      refresherRefreshingText: '刷新中...',
    };
  },
  created() {
    // 设置初始全局渐变
    document.documentElement.style.setProperty('--global-gradient', 'linear-gradient(180deg, #44cdbd 0%, #fff 100%)');
    
    // 加载保存的房间壁纸
    try {
      const savedWallpapers = uni.getStorageSync('roomWallpapers');
      if (savedWallpapers) {
        this.roomWallpapers = JSON.parse(savedWallpapers);
      }
    } catch (e) {
      console.error('Failed to load room wallpapers:', e);
    }
  },
  onLoad() {
    // 动态设置最大下拉高度为屏幕高度一半
    uni.getSystemInfo({
      success: (res) => {
        this.refresherThreshold = Math.floor(res.windowHeight / 4);
      }
    });
  },
  onShow() {
    if (!this.editMode) {
      this.exitMask();
      //在编辑模式下分享设备会触发这里，所以在退出去之前禁止显示
      uni.showTabBar({
        animation: true
      }); //重新显示TabBar
    }

    // 检查是否有壁纸更新
    try {
      const wallpaperUpdate = uni.getStorageSync('updatedWallpaper');
      if (wallpaperUpdate) {
        const update = JSON.parse(wallpaperUpdate);
        // 更新对应房间或全部视图的壁纸
        this.roomWallpapers[update.roomSerialnum] = update.gradient;
        
        // 如果当前正在查看被更新的房间或全部视图，立即更新背景
        if ((update.isAll && this.selectedRoomIndex === -1) || 
            (!update.isAll && this.selectedRoomIndex !== -1 && 
             this.rooms[this.selectedRoomIndex]?.serialnum_room === update.roomSerialnum)) {
          this.updatePageBackground(update.gradient);
        }
        
        // 保存更新后的壁纸配置
        uni.setStorageSync('roomWallpapers', JSON.stringify(this.roomWallpapers));
        // 清除临时存储
        uni.removeStorageSync('updatedWallpaper');
      }
    } catch (e) {
      console.error('Failed to process wallpaper update:', e);
    }

    let newdata, self = this;
    uni.getStorage({
      key: 'userInfo',
      success: function (res) {
        if (res !== null || res !== '') {
          newdata = res.data;
          self.account_user = newdata.accountNum
          self.password_user = newdata.password
          self.sendAccountToApp()

          setTimeout(() => {
            self.initAll();
            //由于修改设备、房间需要切换页面，然后会触发onShow刷新首页
          }, 100);
        }
      }
    });
  },

  methods: {
	  currentWallpaperStyle(){
		  return uni.getStorageSync(this.serialnum_room+"wallpaper")
	  },
    // 处理点击事件的方法
    handleOptionClick(option) {
      // 确保选项存在并直接跳转
      if (option.url) {
        uni.navigateTo({
          url: option.url,
          success: () => {
            console.log(`成功跳转到 ${option.url}`);
          },
          fail: (err) => {
            console.error(`跳转失败: ${err}`);
          }
        });
      } else {
        console.error('无效的选项索引');
      }
    },
    async modifyRes(id) {
      if (this.datetimeRange.length <= 0 || new Date(this.datetimeRange[0]).getTime() - new Date(this.datetimeRange[1]).getTime() >= 0) {
        this.$api.msg('请先选择正确的时间');
        throw new Error("选择时间异常");
      }

      const serialnum_equip = this.equips[this.selectedIndexs[0]].serialnum_equip;
      try {
        const result = await _modifyRes({
          id,
          serialnum_equip,
          res_user: this.account_user,
          start_time: this.datetimeRange[0],
          end_time: this.datetimeRange[1]
        });
        console.log(result)
        if (result === undefined || result.status !== 200) {
          throw new Error("接口返回异常，位置index1.vue : modifyRes");//也有可能不是异常，只返回结果为空
        }
        // this.$api.msg(result.message);
        return result.data;
      } catch (error) {
        throw error; //抛出异常
      }
    },
    toModify() {
      this.$refs.reservate.open('center');
      this.$refs.change.close();
    },
    changeRes(item) {
      // console.log(item)
      this.resSelect = item;
      this.$refs.change.open("center");
    },
    toReservate() {
      this.$refs.reservate.open('center');
    },
    reservateOrModify() {
      if (this.resSelect != null) {
        this.modifyRes(this.resSelect.id).then(res => {
          this.datetimeRange = [];
          this.resSelect = null;
          this.findEquipRes().then(res => {
            this.reservateData = [];
            // this.reservate = false;
            if (res.length > 0) {
              for (let data of res) {
                if (data.res_user === this.account_user) {
                  this.reservateData.push({
                    id: data.id,
                    account_user: data.res_user,
                    range: [data.start_time, data.end_time]
                  });
                }
              }
            }
            this.$refs.reservate.close();
          });
        })
        return;
      }
      this.resEquip().then(res => {
        this.datetimeRange = [];
        this.findEquipRes().then(res => {
          this.reservateData = [];
          // this.reservate = false;
          if (res.length > 0) {
            for (let data of res) {
              if (data.res_user === this.account_user) {
                this.reservateData.push({
                  id: data.id,
                  account_user: data.res_user,
                  range: [data.start_time, data.end_time]
                });
              }
            }
          }
          this.$refs.reservate.close();
        });
      });

    },
    unReservate() {
      uni.showModal({
        title: '警告',
        content: '是否删除',
        // confirmColor: '#000000',
        // showCancel: false,
        buttonText: '确定',
        success: async res => {
          if (res.confirm) {
            this.cancelRes(this.resSelect.id).then(res => {
              this.findEquipRes().then(res => {
                this.reservateData = [];
                // this.reservate = false;
                if (res.length > 0) {
                  for (let data of res) {
                    if (data.res_user === this.account_user) {
                      this.reservateData.push({
                        id: data.id,
                        account_user: data.res_user,
                        range: [data.start_time, data.end_time]
                      });
                    }
                  }
                }
                this.$refs.reservate.close();
              });
            });
            this.$refs.change.close();
          }
        }
      });
    },
    async cancelRes(id) {
      try {
        const result = await _cancelRes(id);
        if (result === undefined || result.status !== 200) {
          throw new Error("接口返回异常，位置index1.vue : cancelRes");//也有可能不是异常，只返回结果为空
        }
        return result.message;
      } catch (error) {
        throw error; //抛出异常
      }
    },
    async resEquip() {
      if (this.datetimeRange.length <= 0 || new Date(this.datetimeRange[0]).getTime() - new Date(this.datetimeRange[1]).getTime() >= 0) {
        this.$api.msg('请先选择正确的时间');
        throw new Error("选择时间异常");
      }

      const serialnum_equip = this.equips[this.selectedIndexs[0]].serialnum_equip;
      try {
        const result = await _resEquip({
          serialnum_equip: serialnum_equip,
          res_user: this.account_user,
          start_time: this.datetimeRange[0],
          end_time: this.datetimeRange[1]
        });
        console.log(result)
        if (result === undefined || result.status !== 200) {
          throw new Error("接口返回异常，位置index1.vue : resEquip");//也有可能不是异常，只返回结果为空
        }
        this.$api.msg(result.message);
        return result.data;
      } catch (error) {
        throw error; //抛出异常
      }
    },
    async findResEquip(serialnum_equip) {
      // const serialnum_equip = this.equips[this.selectedIndexs[0]].serialnum_equip;
      try {
        const result = await _findResEquip(serialnum_equip);

        if (result === undefined || result.status !== 200) {
          throw new Error("接口返回异常，位置index1.vue : findResEquip");//也有可能不是异常，只返回结果为空
        }

        return result.data;
      } catch (error) {
        throw error; //抛出异常
      }
    },

    // getDateTime(date, addZero = true) {
    //   return `${this.getDate(date, addZero)} ${this.getTime(date, addZero)}`
    // },
    // getDate(date, addZero = true) {
    //   date = new Date(date)
    //   const year = date.getFullYear()
    //   const month = date.getMonth() + 1
    //   const day = date.getDate()
    //   return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
    // },
    // getTime(date, addZero = true) {
    //   date = new Date(date)
    //   const hour = date.getHours()
    //   const minute = date.getMinutes()
    //   const second = date.getSeconds()
    //   return this.hideSecond ?
    //       `${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}` :
    //       `${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}:${addZero ? this.addZero(second) : second}`
    // },
    // addZero(num) {
    //   if (num < 10) {
    //     num = `0${num}`
    //   }
    //   return num
    // },
    initAll() {
      this.getUserInfo().then((res) => {
        this.headsculpture = res.photo_user;
      }).catch(() => {
        this.headsculpture = "/static/images/headphotos/missing-face.png";
      });
      this.unReadNum().then((num) => {
        this.unreadnum = num;
      });
      this.getLabName().then((res) => {
        this.laboManage = res;
        this.laboratoryList = [];//初始化数组
        for (let i = 0; i < this.laboManage.length; i++) {
          this.laboratoryList.push({
            title: this.laboManage[i].name,
            icon: '../../static/images/fakeEmpty.png',
            disabled: false,
            owner_id: this.laboManage[i].owner_id,
            index: i,
            id: this.laboManage[i].id
          });
        }
        //以下添加默认选项"实验室管理"
        this.laboratoryList.push({
          title: '实验室管理',
          icon: '../../static/images/d23369b06bf66e011b5745262a432e87.png',
          disabled: false
        });
        if (this.laboratoryList[0] === '实验室管理') {
          //这说明没有获取到实验室，别管
        } else if (this.labName === "空" || this.laboratoryList[this.selectedLaboratory] === undefined || this.laboManage[this.selectedLaboratory].id !== this.selectedLab) {
          //理论上来说，实验室数量发生变动后，可以由此检测到，触发实验室恢复选择为第一个实验室
          //当然，这里也负责初始化数据的
          this.selectedLaboratory = 0;
          this.selectedLab = this.laboManage[0].id;
          this.labName = this.laboManage[0].name;
          this.laboratoryList[this.selectedLaboratory].icon = "../../static/images/chosed.png";
          this.ownerID = this.laboManage[0].owner_id;
        } else {
          this.laboratoryList[this.selectedLaboratory].icon = "../../static/images/chosed.png";//界面刷新后选中状态会改变，需要强制更新
        }
      });
      this.getRooms().then((res) => {
        this.rooms = res;
      });
      if (this.selectedRoomIndex === -1) {
        this.getAllEqualsInfo().then((res) => {
          console.log(res)
          this.equips = res;
          for (let i = 0; i < res.length; i++) {

            let state = res[i].workingtag_equip;
            this.equips[i].workingtag_equip = this.states[state];
            if (res[i].serialnum_room === null) {
              this.equips[i].name_room = "共享设备";//共享设备可不能拥有房间
            }
          }
        });//-1说明选中的是默认"全部"的页面
      } else {
        this.getroomequip(this.selectedRoomIndex);
      }
      /*
      这里是在切换页面后，根据房间选项不同，进行不同的刷新
       */
    },
    //
    input(e) {
      if (!e) {
        uni.showTabBar({
          animation: true
        }); //重新显示TabBar
      }
    },
    //点击主页左上角实验室菜单对象触发
    tapPopup(e) {

      if (e.index === undefined) {
        //最后一个实验室管理功能没有index选项，所以这样判断
        uni.navigateTo({
          url: "/pages/laboratorymanage/laboratorymanage"
        });
        return;
      }
      this.ownerID = e.owner_id;
      this.selectedLab = e.id;
      this.getRooms().then((res) => {
        this.rooms = res;
      });//更新房间信息
      this.laboratoryList[this.selectedLaboratory].icon = "../../static/images/fakeEmpty.png";//恢复上一个被选中的实验室图表
      this.laboratoryList[e.index].icon = "../../static/images/chosed.png";//替换选中实验室的图标
      this.selectedLaboratory = e.index;//更新选中信息
      this.labName = this.laboratoryList[e.index].title;
      this.doGetAllEqualsInfo();
    },
    toEdit() {
      this.selectedIndexs = [];//切换编辑状态初始化数组
      //进一步减慢长按事件，让其与click错开，避免冲突
      this.editMode = true;
      uni.hideTabBar({
        animation: true
      }); //隐藏tabBar
    },
    //点击事件
    clickTable(index) {
      this.tabCurrentIndex = index;
      switch (index) {
        case 0:
          this.isDeleteequip = true;
          break;
        case 1:
          this.toMoveRoom();
          break
        case 2:
          this.reName();
          break;
        case 3:
          this.toShare();
          break;
        case 4:
          if (this.selectedIndexs.length > 0) {
            this.findEquipRes().then(res => {
              this.reservateData = [];
              // this.reservate = false;
              if (res.length > 0) {
                for (let data of res) {
                  // console.log(data)
                  if (data.res_user === this.account_user) {
                    this.reservateData.push({
                      id: data.id,
                      account_user: data.res_user,
                      range: [data.start_time, data.end_time]
                    });
                    // this.reservate = true;
                  }
                }
              }
              this.$refs.popup.open('bottom');
            });

          } else {
            this.$api.msg('请先选择要进行操作的设备')
          }
          break;
        default:
          this.editMode = false; //点击"完成"按钮触发
          uni.showTabBar({
            animation: true
          }); //重新显示TabBar
      }
    },
    //跳转到sharingothers
    toShare() {
      if (this.selectedIndexs.length > 0) {
        let serialnum_equip = this.equips[this.selectedIndexs[0]].serialnum_equip;
        let name_equip = this.equips[this.selectedIndexs[0]].name_equip;
        console.log(serialnum_equip)
        uni.navigateTo({
          url: '/pages/sharingothers/sharingothers?serialnum_equip=' + serialnum_equip +
              '&name_equip=' + name_equip
        });
      } else {
        this.$api.msg('请先选择要进行操作的设备')
      }
    },
    //移动设备
    //跳转到moveroom
    toMoveRoom() {
      if (this.selectedIndexs.length !== 0) {
        let serialnum_equip = this.equips[this.selectedIndexs[0]].serialnum_equip;
        // console.log(this.equips[this.selectedIndexs].serialnum_equip)
        uni.navigateTo({
          url: '/pages/moveroom/moveroom?serialnum_equip=' + serialnum_equip
        });
      } else {
        this.$api.msg('请先选择要进行操作的设备')
      }
    },
    //重命名
    async changename() {
      let equip = this.equips[this.selectedIndexs[0]];
      if (this.selectedIndexs.length !== 0 && this.inputClearValue !== '') {
        console.log(this.serialnum_equip)
        console.log(this.equipname)
        let data1 = {
          serialnum_equip: equip.serialnum_equip,
          name_equip: this.inputClearValue
        }
        let res = await _changename(data1);
        if (res.flag) {
          uni.hideLoading();
          this.showRenameDialog = false
          uni.reLaunch({
            url: '/pages/index1/index1'
          });
        } else {
          setTimeout(() => {
            uni.hideLoading();
            this.$api.msg(data1.message);
          }, 500);
        }
      } else if (this.selectedIndexs.length === 0) {
        this.$api.msg('请先选择要进行操作的设备')
      } else if (this.inputClearValue === '') {
        this.$api.msg('设备名称不能为空')
      }
    },


    // 重命名
    reName() {
      if (this.selectedIndexs.length >= 1) {
        this.showRenameDialog = true;
      } else {
        this.$api.msg('请先选择要进行操作的设备')
      }
    },
    //删除设备
    async deleteequip() {
      if (this.selectedIndexs.length > 0) {
        console.log(this.serialnum_equip)
        console.log(this.account_user)
        let result = false;
        for (let index in this.selectedIndexs) {
          console.log(index)
          let realIndex = this.selectedIndexs[index];
          let temp = await _deleteequip({
            serialnum_equip: this.equips[realIndex].serialnum_equip,
            account_user: this.account_user
          });
          if ((result = temp.flag) === false) {
            break;
          } //删除设备异常就跳出
        }
        if (result) {
          this.isDeleteequip = false;
          this.selectedIndexs = []; //设备删除成功后就清空数组
          uni.reLaunch({
            url: '/pages/index1/index1'
          });
        } else {
          this.selectedIndexs = []; //删除失败也清空选择，避免bug
          setTimeout(() => {
            uni.hideLoading();
            // this.$api.msg(data1.message);
            this.$api.msg("错误");
          }, 500);
        }
      } else {
        this.$api.msg('请先选择要进行操作的设备');
      }
    },
    clearIcon: function () {
      this.inputClearValue = '';
      this.showClearIcon = false;
    },
    clearInput: function (event) {

      this.inputClearValue = event.detail.value;
      console.log(event.detail.value.length)
      this.showClearIcon = event.detail.value.length > 0;
    },
    async getLabName() {
      let result;
      try {
        result = await _labomanage({
          user: this.account_user
        });
      } catch (error) {
        throw error; //抛出异常
      }
      if (result === undefined || result.status !== 200 || result.data.length === 0) {
        throw new Error("接口返回异常，位置index1.vue : labName");//也有可能不是异常，只返回结果为空
      }
      return result.data;
    },
    // 未读消息数
    async unReadNum() {
      let result;
      try {
        result = await _unreadnum({
          receiver: this.account_user,
        });
      } catch (error) {
        throw error; //抛出异常
      }
      if (result === undefined || result.status !== 200) {
        throw new Error("接口返回异常，位置index1.vue : unReadNum");
      }
      return result.data;
      // this.unreadnum = res.data
    },
    //初始化主页信息，主要头像
    async getUserInfo() {
      let result;
      try {
        result = await _getuserinfo({
          account_user: this.account_user,
          password_user: this.password_user
        });
      } catch (error) {
        throw error; //抛出异常
      }
      if (result === undefined || result.status !== 200) {
        throw new Error("接口返回异常，位置index1.vue : getUserInfo");
      }
      return result.data;
    },

    ...mapMutations(['login', 'isSetExper', 'logoutExper', "linkequip"]),
    //将账号传给App.vue界面
    sendAccountToApp() {
      uni.$emit('AccountToApp', this.account_user);
      console.log(this.account_user)
    },

    link(index) {
      if (this.editMode) {
        console.log(index)
        let realIndex = this.selectedIndexs.indexOf(index);
        if (realIndex !== -1) {
          this.selectedIndexs.splice(realIndex, 1); //再次点击设备后selectedIndexs里面移除该设备
        } else {
          this.selectedIndexs.push(index); //当点击未选中的设备时，将添加对应设备的索引
        }
        return; //编辑模式不要向下执行
      }
      console.log(this.equips[index].serialnum_equip)
      this.findResEquip(this.equips[index].serialnum_equip).then(res => {
        if (res.res_user && res.res_user !== this.account_user) {
          this.$api.msg(`该设备已经被${res.res_user}预约，请注意`);
        }
      });
      // 存储点击设备信息
      this.linkequip({
        serialnum_equip: this.equips[index].serialnum_equip,
        name_equip: this.equips[index].name_equip
      });
      //页面跳转
      this.navTo('/pages/equipcontroller/equipcontroller')
    },
    // 遮罩层
    exitMask() {
      this.showIndex_room = false;
      this.showIndex_lab = false
      uni.showTabBar({
        animation: true
      }); //重新显示TabBar
    },
    clickIndex_room() {
      if (this.editMode) {
        return;
      }
      let dom2 = uni.createSelectorQuery().in(this);
      dom2.select("#menu2").boundingClientRect()
      dom2.exec((data) => {
        this.x1 = (data[0].left + data[0].right) / 1;
        this.y1 = data[0].top + data[0].height / 2;
      })
      uni.hideTabBar({
        animation: true
      }); //隐藏tabBar
      this.showIndex_room = !this.showIndex_room;
    },
    clickIndex_lab(e) {
	console.log(e)
      if (this.editMode || this.laboManage.length === 0) {
        return;//在编辑模式或者实验室长度为0时，无法打开下拉框
      }
      let element = e.target
      console.log(e.target)
      // this.doSomethingWithElement(element);
      let dom = uni.createSelectorQuery().in(this);
      dom.select("#menu").boundingClientRect()
      dom.exec((data) => {
        this.y = data[0].top + data[0].height - 10;
      })
      this.showIndex_lab = !this.showIndex_lab;
      uni.hideTabBar({
        animation: true
      }); //隐藏tabBar
    },
    navTo(url) {
      if (this.editMode) {
        return;
      }
      uni.navigateTo({
        url: url,
        success(res) {
          console.log('成功啦', res);
        },
        fail(err) {
          console.log('失败啦', err);
        }
      })
    },

    async getRooms() {
      let result;
      try {
        if (this.ownerID === 0) {
          result = await _getrooms({
            account_user: this.account_user
          });
        } else {
          result = await _getRoomsNew(this.ownerID);
        }
      } catch (error) {
        throw error; //抛出异常
      }
      if (result === undefined || result.status !== 200) {
        throw new Error("接口返回异常，位置index1.vue : getrooms");
      }
      return result.data;
    },
    //获取当前实验室所有的设备信息
    doGetAllEqualsInfo() {
      if (this.editMode) {
        return;
      }
      this.getAllEqualsInfo().then((res) => {
        console.log(res)
        this.equips = res;
        for (let i = 0; i < res.length; i++) {

          let state = res[i].workingtag_equip;
          this.equips[i].workingtag_equip = this.states[state];
          if (res[i].serialnum_room === null) {
            this.equips[i].name_room = "共享设备";//共享设备可不能拥有房间
          }
        }
      });
    },
    //获取当前实验室所有的设备信息
    async getAllEqualsInfo() {
      let account_user;
      this.selectedRoomIndex = -1;
      try {
        let ownerID = this.laboManage[this.selectedLaboratory].owner_id;
        let result = await _getRoomsNew(ownerID);//从房间获取实验室拥有者的账号
        account_user = result.data[0].account_user;
        // console.log(result.data)
      } catch (e) {
      }
      if (!account_user) {
        account_user = this.account_user;//如果是自己的实验室，就查不到账号，那就用缓存的
      }
      let result;
      try {
        result = await _getequiplistall({
          account_user: account_user
        });
        console.log(result)
      } catch (error) {
        throw error; //抛出异常
      }
      if (result === undefined || result.status !== 200) {
        throw new Error("接口返回异常，位置index1.vue : getAllEqualsInfo");
      }

      return result.data;
    },

    async getroomequip(index) {

      if (this.editMode) {
        return;
      }
      this.selectedRoomIndex = index;
      console.log(this.selectedRoomIndex)
      this.serialnum_room = this.rooms[index].serialnum_room
      console.log(this.rooms[index])
      let data = {
        account_user: this.rooms[index].account_user,
        serialnum_room: this.serialnum_room
      }
      let res = await _getroomequip(data);
      console.log(res);
      this.equips = res.data;
      for (let i = 0; i < this.equips.length; i++) {
        let state = this.equips[i].workingtag_equip;
        this.equips[i].workingtag_equip = this.states[state];
      }
      // console.log(this.equips)
    },

    scroll() {
    },
    editCurrentRoom() {
      // 跳转到房间编辑页面，传递当前房间信息
      if (this.selectedRoomIndex === -1) {
        // 处理"全部"的情况
        uni.navigateTo({
          url: `/pages/roomedit/roomedit?roomName=全部&roomSerialnum=all&accountNum=${this.account_user}&isAll=true`
        });
		// 
      } else if (!this.rooms[this.selectedRoomIndex]) {
        this.$api.msg('请先选择房间');
        return;
      } else {
        const room = this.rooms[this.selectedRoomIndex];
        uni.navigateTo({
          url: `/pages/roomedit/roomedit?roomName=${room.name_room}&roomSerialnum=${room.serialnum_room}&accountNum=${room.account_user}`
        });
      }
    },
    async onRefresh() {
      this.refresherTriggered = true;
      try {
        await this.initAll();
      } catch (error) {
        console.error('Refresh failed:', error);
      } finally {
        setTimeout(() => {
          this.refresherTriggered = false;
        }, 800); // 增加延迟使动画更流畅
      }
    },
    updatePageBackground(gradient) {
      document.documentElement.style.setProperty('--global-gradient', gradient);
      const pageBg = document.querySelector('.page-bg-scroll');
      if (pageBg) {
        pageBg.style.background = gradient;
      }
    },
  },
  watch: {
    selectedRoomIndex: {
      handler(newIndex) {
		  console.log(newIndex)
        // 当切换房间时，更新壁纸
        if (newIndex === -1) {
          // 全部视图使用自己的壁纸
          this.serialnum_room="all";
        } else if (this.rooms[newIndex]) {
          const roomSerialnum = this.rooms[newIndex].serialnum_room;
          const wallpaper = this.roomWallpapers[roomSerialnum];
          if (wallpaper) {
            this.updatePageBackground(wallpaper);
          } else {
            // 如果没有设置过壁纸，使用默认壁纸
            this.updatePageBackground('linear-gradient(180deg, #44cdbd 0%, #fff 100%)');
          }
        }
      },
      immediate: true
    }
  },
};
</script>

<style scoped lang="scss">
.page-bg-scroll {
  width: 100vw;
  min-height: 100vh;
  background: var(--global-gradient, linear-gradient(180deg, #44cdbd 0%, #fff 100%));
  overflow-y: auto;
  position: relative;
  transition: all 0.3s ease;
}
.background {
  background: transparent;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  width: 100vw;
  box-sizing: border-box;
}
.header {
  background: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 80rpx 40rpx 60rpx;
  width: 100%;
  //box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  position: relative;
  //margin-top: 0;
  //padding-top: 0;

  //&::before {
  //  content: '';
  //  position: absolute;
  //  top: 0;
  //  left: 0;
  //  right: 0;
  //  bottom: 0;
  //  //background: rgba(255, 255, 255, 0.1);
  //  backdrop-filter: blur(1px);
  //  z-index: 1;
  //}

  .lab-menu {
    height: 70rpx;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 30rpx;
    padding: 0 20rpx;
    position: relative;
    z-index: 2;
    margin-top: 20rpx;
  }

  .lab-name {
    width: 90%;
    color: #000000;
    //font-size: 40rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }

  .icon-lab {
    width: 30rpx;
    height: 30rpx;
    position: relative;
    z-index: 2;
  }

  .top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    margin-top: 20rpx;

    .notification-badge {
      display: flex;
      align-items: center;
      margin-left: 200rpx;
    }

    .add-room-icon {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      border: 5rpx solid #222;
      //background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      box-sizing: border-box;
      z-index: 1;
    }

    .icon-notification {
      width: 45rpx;
      height: 45rpx;
    }
  }
}

.group-container {
  //padding: 20rpx;
  margin-top: 10rpx;
  .room-selector {
    background: #fff;
    border-radius: 20rpx;
    padding: 10rpx;
    margin: 0 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .room-lists {
    display: flex;
    align-items: center;
    justify-content: space-around;

    .add-room-icon {
      //width: 5%;
      //margin-right: 20rpx;
    }

    .scroll-view {
      white-space: nowrap;
      width: 92.5%;
    }

  }

  .scroll-item {
    display: inline-block;
    margin-right: 50rpx;
    height: 80rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 35rpx;

    &.active {
      color: #5a817b;
      font-weight: bold;

    }
  }

  .equipment-item {
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    width: 100%;
    height: 250rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.03);
    }

    .wrap {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .top {
      width: 100%;
      display: flex;
      //justify-content: center;
      align-items: center;
      margin-bottom: 12rpx;

      .pic {
        width: 90rpx;
        height: 110rpx;
        object-fit: contain;
        margin-bottom: 0;
      }
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      align-items: flex-start;
      text-align: left;
    }

    .name_equip {
      font-size: 28rpx;
      font-weight: bold;
      color: #222;
      margin-bottom: 8rpx;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .desc-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 22rpx;
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
    }

    .room-name {
      color: #999;
      margin-right: 8rpx;
      text-align: left;
    }

    .status {
      font-size: 22rpx;
      font-weight: 500;
      margin-left: 8rpx;
      text-align: left;
    }
  }
}

.edit-toolbar {
  width: 100vw;
  height: 160rpx;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;

  .tab-wrap {
    height: 80rpx;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    &.active {
      /* style for active tab */
    }
  }
}

.button-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: -42rpx;

  .button {
    width: 48%;
    padding: 15rpx;
    background-color: #138f87;
    border-radius: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &:active {
      background-color: #256b65;
    }
  }
}

.modal-content {
  padding: 10rpx 24rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: solid #DADADAFF;

  .content {
    color: #999;
  }

  .input {
    padding: 5px;
  }
}

.change-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10rpx;
  width: 50vw;
  height: 100%;

  .title {
    margin: 30rpx;
    font-weight: bolder;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

  }
}

.add-device-card {
  width: 90%;
  margin: 40rpx auto 0 auto;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0 48rpx 0;
  cursor: pointer;
  transition: box-shadow 0.2s;
  border: 1rpx solid #f0f0f0;
}
.add-device-card:active {
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.add-device-plus {
  font-size: 60rpx;
  color: #44cdbd;
  font-weight: bold;
  margin-bottom: 16rpx;
}
.add-device-text {
  font-size: 28rpx;
  color: #222;
  font-weight: 500;
}

.no-equipment {
  height: 100%;
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;


  .image_22 {
    //margin-left: 255.42rpx;
    //margin-top: 190rpx;
    width: 180rpx;
    height: 180rpx;
  }

  .image_23 {
    width: 400rpx;
    height: 400rpx;
    //margin-left: 304rpx;
    //margin-top: -225rpx;
  }

  .text {
    position: absolute;
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  opacity: 0.3;
  background-color: #000;
}

.reservate-wrap {
  height: 85%;
  width: 100%;
  //background-color: red;
  margin-top: 7.5%;
  margin-bottom: 7.5%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    margin-bottom: 40rpx;
    font-weight: bolder;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .add-icon {
      position: absolute;
      right: 50rpx;
    }
  }

  .scroll-Y {
    //background-color: red;
    height: 100%;

    .item {
      background-color: #fff;
      margin: 20rpx;
      box-shadow: 0px 0px 21rpx 0px rgba(0, 0, 0, 0.10);
    }

    .is-hover {
      //color: rgba(255, 255, 255, 0.6);
      background-color: rgba(204, 202, 202, 0.6);
      //border-color: rgba(197, 197, 197, 0.6);
    }
  }
}

.reservate-model {
  height: 95%;
  //width: 100%;
  //box-shadow: 0px 0px 21rpx 0px rgba(0, 0, 0, 0.10);
  margin-top: 7.5%;
  margin-bottom: 7.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 10rpx;

  .title {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    font-weight: bolder;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .add-icon {
      position: absolute;
      right: 50rpx;
      //&:hover{
      //  background-color: #256b65;
      //}
    }
  }

  .button {
    width: 90%;
    height: 20%;
    background-color: #138f87;
    border-radius: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &:active {
      background-color: #256b65;
    }

    .text_7 {
      color: #ffffff;
      line-height: 33.33rpx;
    }
  }

  .tips {
    margin: 20rpx;
    //margin-bottom: 20rpx;
    font-size: 20rpx;
    color: rgba(136, 136, 136, 0.8);
  }
}

.plus {
  width: 28rpx;
  height: 28rpx;
  position: relative;
  z-index: 2;
}

.plus::before,
.plus::after {
  content: '';
  position: absolute;
  background: #222;
  border-radius: 2rpx;
}

.plus::before {
  left: 50%;
  top: 0;
  width: 5rpx;
  height: 100%;
  transform: translateX(-50%);
}

.plus::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 5rpx;
  transform: translateY(-50%);
}

.add-device-in-grid {
  width: 100%;
  height: 100%;
  min-height: 250rpx;
  margin: 0;
  box-shadow: none;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1rpx solid #f0f0f0;
  padding: 0;
}

.edit-room-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 32rpx 0 0 0;
}
.edit-room-btn {
  background: #eeeeee;
  color: #222;
  font-size: 24rpx;
  border-radius: 36rpx;
  padding: 2rpx 30rpx;
  font-weight: 500;
  outline: none;
  transition: all 0.2s ease;
}
.edit-room-btn:active {
  background:rgb(210, 210, 210);
  box-shadow: 0 1rpx 4rpx rgba(0,0,0,0.10);
}
.scroll-content {
  width: 100vw;
  min-height: 100vh;
  background: transparent;
  transition: all 0.3s ease;
}
</style>